<template>
    <div>
<myheader></myheader>
   
    
	<h1 class='content'>注册页面</h1>
    <myerror><span v-if="namef" slot="username">账号必须为英文</span>
             <span v-if="namer" slot="namer">账号已存在</span>
             <span v-if="passf" slot="password">密码必须为英文字母开头并且长度为6到16位</span>
             <span v-if="Rpassf" slot="Rpassword">两次密码不一样</span>
    </myerror>
    <form action="">
        <div class='test'>
        <label for="">账号:</label>
        <input type="text" data-required="true"  placeholder="请输入账号" v-model="username" @blur='okname(username)'>
    </div>
    <div class='test'>
        <label for="">密码:</label>
        <input max="16" min="6"  type="password"  placeholder="请输入密码"  v-model="password">
    </div>
    <div class='test ok'>
        <label for="">请确认密码:</label>
        <input max="16" min="6"  type="password"  placeholder="请再次输入密码"  v-model="Rpassword">
    </div>
   <div class='test'>
        
      <button @click="check">提交</button>
    </div>
    </form>
    

	

		

		



       
<myfooter></myfooter>
    </div>


</template>


<script>
import myheader from './header.vue'
import myfooter from './footer.vue'
import myerror from './error.vue'
 import '../css/register-login.css'
    export default{
        data(){
            return{
                username:'',
                password:'',
                Rpassword:'',
                namef:false,
                passf:false,
                Rpassf:false,
                namer:false
            }
        },
        methods: {
            check(){    
                if(/^[A-Za-z]+$/.test(this.username)){
                    this.namef=false     
                } else{
                    this.namef=true
                    return
                }        
                if(/^[a-zA-Z]\w{5,17}$/.test(this.password)){
                    this.passf=false
                }  else{
                     this.passf=true
                     return
                }
               if(this.password!=this.Rpassword){
                   this.Rpassf=true
                   return
               }else this.Rpassf=false 
               if(this.namer==true){
                   return
               }            
              this.$http.post('/users/okname',{userName:this.username,userPwd:this.password}).then(result=>{
                  if(result.body.status==0){
                      this.$http.post('users/login',{userName:this.username,userPwd:this.password}).then(doc=>{
                         if(doc.body.status==0){
                             this.$router.push({path:'/goodlist'})
                         }
                      })
                  }
              })
            },
            okname(name){
                var username = name
                this.$http.post('/users/checkname',{userName:username}).then(result=>{
                    if(result.body.status==0){
                        this.namer=true
                    }else{
                        this.namer=false
                    }
                    
                })
            }
        },
        components: {
            myheader,
            myfooter,
            myerror
        }
    }


</script>

<style>
.content{
   
    text-align: center
}     
.test{
   text-align: center;
    margin: 0 auto;
    margin: 15px
}   
.test input{
    width: 400px;
    height: 40px;
} 
.test.ok{
     text-indent: -3em;
}
.test button{
    text-align: center;
    border: 2px solid blue;
    width: 100px;
    background-color: blue;
    color: white
}
                                                                                                                      
</style>

